<template>
  <div class="icon_form">
    <div class="flex flex-between-center header">
      <span style="color:#666666">图标{{ itemIndex + 1 }}</span>
      <p class="tools">
        <span class="pointer" @click="$emit('upSortItem')"><i class="el-icon-top" /></span>
        <span class="pointer" @click="$emit('downSortItem')"><i class="el-icon-bottom" /></span>
      </p>
    </div>
    <div class="flex align-center">
      <crop-upload show-type="photo" :is-square="true" :init-val="formData.img" wrapper-width="88px" wrapper-height="88px" :photo-width="88" :photo-height="88" @setVal="(val) => { formData.img = val }" />
      <div class="flex-1 input_wrapper">
        <div class="flex name">
          <label class="flex align-center justify-center"><span class="required-icon">*</span>名称</label>
          <el-input v-model="formData.title" placeholder="请输入图标名称" maxlength="6" clearable />
        </div>
        <div class="flex price">
          <label class="flex align-center justify-center"><span class="required-icon">*</span>ID</label>
          <el-input v-model="formData.jumpUrl" placeholder="请输入ID" clearable />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cropUpload from '@/components/cropUpload'
export default {
  components: { cropUpload },
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    itemIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 10px;
}

.icon_form {
  margin-top: 10px;

  .input_wrapper>div:last-child {
    margin-bottom: 0;
  }
}

.tools {
  span {
    margin-left: 10px;
    color: #666666;
  }
}
</style>
